import React, { useState, useEffect } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { Grid, Typography, Button, Avatar } from '@material-ui/core';
import { Section, SectionAlternate } from 'components/organisms';
import { Hero, Users, Speakers, Topbar } from './components';
import { useSelector, useDispatch } from 'react-redux'
import { setFollowings, setFollowers } from 'redux/actions/FollowActions'
import { callGetApi } from 'utils/networking';

const useStyles = makeStyles(theme => ({
  content: {
    backgroundColor: theme.palette.alternate.main
  },
  loadMore: {
    height: '100px',
    backgroundColor: theme.palette.alternate.main
  },
  loadMoreButton: {
    backgroundColor: theme.palette.alternate.main,
    marginBottom: '50px',
    marginTop: '-30px'
  },
  sectionBreadcrumb: {
    '& .section-alternate__content': {
      paddingTop: theme.spacing(2),
      paddingBottom: theme.spacing(2),
    },
  },
  pagePaddingTop: {
    paddingTop: theme.spacing(3),
    [theme.breakpoints.up('md')]: {
      paddingTop: theme.spacing(5),
    },
  },
  center: {
    minWidth: '100%',
    maxWidth: '100%',
    [theme.breakpoints.up('sm')]: {
        minWidth: 420,
    },
  },
  toolBar: {
    marginTop: '30px',
  },
  usersSection: {
    marginTop: '-7%',
  }
}));

const Members = () => {
  const classes = useStyles();
  const dispatch = useDispatch();
  
  const searchKeyword = useSelector((state) => state.searchMembers.searchKeyword)
  const profileData = useSelector((state) => state.auth.profileData)
  const [userList, setUserList] = useState([]);

  useEffect(() => {
    getServerSideProps()
  }, [searchKeyword])

  const getServerSideProps = async () => {
      await loadData();
  }

  const loadData = async () => {
    callGetApi(`song/search_top_users?search_key=${searchKeyword}&limit=21&offset=0`, dispatch, (data) => {
      setUserList(data.data)
      loadFollowData();
    })
  }

  const loadMoreData = async () => {
    callGetApi(`song/search_top_users?search_key=${searchKeyword}&limit=21&offset=${userList.length}`, dispatch, (data) => {
      const newList = [...userList, ...data.data];
      setUserList(newList)
  
      loadFollowData();
    })
  }

  const loadFollowData = async () => {
    if (!profileData || !profileData.id) {
      return;
    }

    callGetApi(`user/followings_and_followers`, dispatch, (data) => {
      dispatch(setFollowers(data.followers));
      dispatch(setFollowings(data.followings));
    })
  }

  const pages = {
    user_types: {
      title: 'User Type',
      id: 'user_type',
      pages: [
        'All members',
        'Admins',
        'Writers',
        'Moderators'
      ],
    },
    sort_by: {
      title: 'Sort By',
      id: 'sort_by',
      pages: [
        'Default',
        'No. of followers',
        'Newest to Oldest',
        'Oldest to Newest',
        'No. of blog posts',
        'No. of forum posts'
      ],
    },
  };
  
  return (
    <div className={classes.content}>
      <Hero />
      <div className={classes.toolBar}>
        <Topbar pages={pages}/>
      </div>
      <SectionAlternate>
        <Users data={userList} className={classes.usersSection}/>
      </SectionAlternate>
      <div className={classes.loadMore}>
        <Grid item xs={12} container justify="center" className={classes.loadMoreButton}>
          <Button
            variant="contained"
            color="primary"
            size="large"
            onClick={loadMoreData}
            className={classes.button}
          >
              Load more
          </Button>
        </Grid>
      </div>
      {/* <SectionAlternate narrow>
        <Speakers data={webinars} />
      </SectionAlternate> */}
    </div>
  );
};

export default Members;
